<template>
  <div class="left2">
    <div class="bt">
      <div class="tit1">{{ title }}</div>
    </div>
    <div class="leftTwo" ref="chartDom"></div>
  </div>

</template>

<script setup>

import * as echarts from "echarts";
import {onMounted, ref} from "vue";

const title = "产值占比"
const chartDom = ref(null)
onMounted(() => {
      const myChart = echarts.init(chartDom.value);


      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        legend: {
          data: ['渔业产值', '畜牧业产值', '种植业产值'],
          textStyle: {
            color: "#fff"
          },
        },

        grid: {
          left: '3%',
          right: '4%',
          bottom: 35,
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: ['2019', '2020', '2021', '2022', '2023'],
            axisLabel: {
              color: '#fff'
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisLabel: {
              color: '#fff'
            },
            splitLine: {
              show: false,
            }
          }
        ],
        series: [

          {
            name: '渔业产值',
            type: 'line',
            stack: 'Total',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: [220, 182, 191, 234, 290, 330, 310]
          },
          {
            name: '畜牧业产值',
            type: 'line',
            stack: 'Total',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: [150, 232, 201, 154, 190, 330, 410]
          },

          {
            name: '种植业产值',
            type: 'line',
            stack: 'Total',
            label: {
              position: 'top'
            },
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: [820, 932, 901, 934, 1290, 1330, 1320]
          }
        ]
      };

      myChart.setOption(option);
    }
)


</script>

<style lang="scss" scoped>
.leftTwo {
  height: 100%;
  margin: 25px auto auto 0;
  width: 100%
}

.left2 {
  width: 23%;
  height: calc(100% / 3 - 47px);
  background-image: url("@/assets/img/backg1.png");
  background-size: 100% 100%;
  position: fixed;
  top: calc(100% / 3 + 50px);
  float: left;
}

.bt {
  width: calc(100% - 24px);
  height: 40px;
  margin-left: 24px;
  float: left;
  line-height: 40px;
}

.tit1 {
  width: auto;
  height: 40px;
  padding-right: 4px;
  font-size: 13px;
  font-weight: bold;
  background: linear-gradient(to top, #78bcf7, #f9fcff);
  -webkit-background-clip: text;
  color: transparent;
  float: left;
  /*定义文本颜色为透明*/
}
</style>